<template>
    <div>
        <div >
            <el-form :inline="true" class="operateView">
                <el-button v-for="(item, index) in formData.operateList" :key="index" 
                    style="margin: 10px 0;margin-left: 20px;"
                    v-if="item.place=='form'" 
                    @click="operateActionTap(item)" 
                    :type="item.buttonType"
                    size="small"
                    >{{item.name}}</el-button>
            </el-form>
        </div>
        <div class="app-container">
            <el-row style="margin-top: 10px">
              <el-form ref="rowForm" :model="rowForm" :rules="rules" label-position="top">
                  <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                      <el-col style="margin-left: 20px" :span="item.width?item.width:5" v-for="(item, index) in formData.fieldFormList" :key="index">
                          <el-form-item style="width: 100%;" :label="item.showName" :prop="item.key" v-if="item.formType=='Switch'">
                            <el-switch
                                v-model="rowForm[item.key]"
                                :active-value="true"
                                :inactive-value="false"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                />
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='Textarea'">
                            <el-input v-model="rowForm[item.key]" placeholder="请输入" type='textarea'/>
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='RichText'">
                            <Editor v-model="rowForm[item.key]" :minHeight="600" />
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='DatePicker'">
                            
                            <el-date-picker
                              v-model="rowForm[item.key]"
                              :type="item.type"
                              placeholder="选择日期">
                              {{item.formType}}
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='Upload'">
                            <single-upload :form="item" :fileUrl="rowForm[item.relatedModel]?rowForm[item.relatedModel]['url']:rowForm[item.key]" @handleFileSuccessForOne="handleFileSuccessForOne"></single-upload>
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='SingleSelectDialog'">
                            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;
                            border: #ddd 1px solid;border-radius: 5px;height: 35px;line-height: 35px;padding: 0 10px;"
                            @click="singleSelectAction(item)" @mouseleave='itemMouseleave()' @mouseenter='itemMouseenter()'>
                              <div v-if="rowForm[item.relatedModel] || rowForm[item.key]" style="color: #333;">{{rowForm[item.relatedModel]?rowForm[item.relatedModel][item.relatedKey]:rowForm[item.key]}}</div>
                              <div v-else style="color: #ccc;">请选择</div>
                              <i v-if="singleSelectDialogMouseStatus" @click.stop="singleSelectClearAction(item)" class="el-icon-circle-close" style="cursor:pointer;color: #bbb;"></i>
                              <i v-else class="el-icon-search" style="color: #bbb;"></i>
                            </div>
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType=='Option'">
                            <el-select v-model="rowForm[item.key]" placeholder="请选择" clearable>
                              <el-option v-for="item in dictOptions[item.key]" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item :label="item.showName" :prop="item.key" v-else>
                            <el-input v-model="rowForm[item.key]" placeholder="请输入"  />
                          </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
          </el-row>
        </div>
        <single-select-dialog ref="singleSelectDialog" @rowClick="rowClick"></single-select-dialog>
    </div>

  </template>
  
  <script>
    import { getFieldFormOptionByFormId } from '@/api/interface/form.js'
    import { operateActionPost } from '@/api/interface/operate.js'
    import singleUpload from '@/components/Upload/singleUpload'
    import singleSelectDialog from '@/views/interface/form/singleSelectDialog'
  export default {
    components: { singleUpload, singleSelectDialog },
    data() {
      return {
        rowId: '',
        rowForm: {},
        rules: {},
        formData: {},
        selectOptions: [],
        dictOptions: [],
        singleSelectDialogMouseStatus: false
      }
    },
    created(){
        if(this.$route.query.formData){
            this.formData = JSON.parse(this.$route.query.formData)
        }
        if(this.$route.query.rowId){
            this.rowId = this.$route.query.rowId
        }
        if(this.$route.query.rowId){
            this.getItemById()
        }
        this.getFieldFormOptionByFormId()
        this.formData.fieldFormList.map((item)=>{
          console.log('item', item)
            if(item.required){
                this.rules[item.key] = [{ required: true, message: '请输入', trigger: 'blur' }]
            }
        })
    },
    methods:{
      // 单选事件
      singleSelectAction(val){
        this.$refs.singleSelectDialog.item = val
        this.$refs.singleSelectDialog.show()
      },
      // 单选回显
      rowClick(item, val){
        console.log('单选回显', item, val)
        this.rowForm[item.key] = val.id
        this.$set(this.rowForm, item.relatedModel, val)
      },
      // 操作事件
      operateActionTap(operate){
        var data = {}
        switch (operate.key) {
          case 'save':
            var url = ''
            for(var item of this.formData.fieldFormList){
              if(typeof this.rowForm[item.key] != 'undefined'){
                data[item.key] = this.rowForm[item.key]
              }
            }
            data.formKey = this.formData.formModel.key
            if(typeof this.rowForm['id'] != 'undefined'){
              data.obj_id = this.rowForm.id
              url = operate.formModel.url + 'updateAction/'
            }else{
              url = operate.formModel.url + 'createAction/'
            }
            this.$refs['rowForm'].validate((valid) => {
              if (valid) {
                operateActionPost(url, data).then((res) => {
                  if(res.data.code == 10000){
                    this.$message({
                      message: res.data.data,
                      type: 'success'
                    })
                    if(operate.key == 'save'){
                      this.$router.go(-1)
                    }
                  }
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });
            break
          case 'back':
            this.$router.go(-1)
            break;
          default:
              break;
        }
      },
      // 获取item详情
      getItemById() {
          operateActionPost(this.formData.formModel.url + 'getItemById/', {obj_id: this.rowId}).then(res => {
              if (res.data.code == 10000) {
                  this.rowForm = res.data.data
              }
          });
      },
      // 获取字典
      getFieldFormOptionByFormId(){
        getFieldFormOptionByFormId({
          formId: this.formData.formModel.id
        }).then(res=>{
          if(res.data.code == 10000){
            this.dictOptions = res.data.data
          }
        })
      },
      handleFileSuccessForOne(form, val){
        this.rowForm[form.key] = val.id
        this.$set(this.rowForm, form.relatedModel, val)
      },
      itemMouseleave(){
        this.singleSelectDialogMouseStatus = false
      },
      itemMouseenter(){
        this.singleSelectDialogMouseStatus = true
      },
      singleSelectClearAction(item){
        this.rowForm[item.key] = ''
        this.$set(this.rowForm, item.relatedModel, null)
      }
    },
  }
  </script>
  
  
  <style lang="scss" scoped>
  .operateView{
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  </style>
  